<template>
    <div class="share_container">
        <div class="share_main">
            <div class="share_title">员工分享TOP10</div>
            <div class="share_content">
                <div v-show="!isNoMessage1" id="echarts" ref="myRef_one" class="min"></div>
                <div v-show="isNoMessage1" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="share_main">
            <div class="share_title">客户分享TOP10</div>
            <div class="share_content">
                <div v-show="!isNoMessage2 && !isExternalLink" id="echarts" ref="myRef_two" class="min"></div>
                <div v-show="isNoMessage2 || isExternalLink" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="no_title">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted, nextTick, computed, watch } from 'vue';
import { export2Img } from '@/utils/utils';
const echarts = inject('ec');
const myRef_one = ref(null);
const myRef_two = ref(null);
const isNoMessage1 = ref(false);
const isNoMessage2 = ref(false);
const props = defineProps(['staffData', 'customerData', 'isExternalLink']);
const getEcharts = (data: any) => {
    if (data.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
        const dataer: any = [];
        const number: any = [];
        data.forEach((item: any) => {
            dataer.push(item.name);
            number.push(item.staff_share_num);
        });
        const myChart_one = echarts.init(myRef_one.value);
        myChart_one.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#FF6B00'
                    }
                }
            },
            grid: {
                top: '10%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataer
            },
            yAxis: {
                type: 'value',
                name: '人数',
                nameGap: 10, // y轴name与横纵坐标轴线的间距
                nameTextStyle: {
                    padding: [0, 35, 10, 0] // 加上padding可以调整其位置
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#969696'
                },
                splitLine: {
                    lineStyle: {
                        type: 'line',
                        color: '#e8e8e8' // 分割线颜色
                    }
                }
            },
            series: [
                {
                    data: number,
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: 'rgba(255,194,16,0.2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,194,16,1)'
                                }
                            ])
                        }
                    }
                }
            ]
        });
        nextTick(() => {
            myChart_one.resize();
        });
        window.onresize = function () {
            myChart_one.resize();
        };
    }
};
const getEcharts2 = (data: any) => {
    if (data.length == 0) {
        isNoMessage2.value = true;
        return;
    } else {
        isNoMessage2.value = false;
        const dataer: any = [];
        const number: any = [];
        data.forEach((item: any) => {
            dataer.push(item.name);
            number.push(item.cust_share_num);
        });
        const myChart_two = echarts.init(myRef_two.value);
        myChart_two.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#FF6B00'
                    }
                }
            },
            grid: {
                top: '10%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataer
            },
            yAxis: {
                type: 'value',
                name: '人数',
                nameGap: 10, // y轴name与横纵坐标轴线的间距
                nameTextStyle: {
                    padding: [0, 35, 10, 0] // 加上padding可以调整其位置
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#969696'
                },
                splitLine: {
                    lineStyle: {
                        type: 'line',
                        color: '#e8e8e8' // 分割线颜色
                    }
                }
            },
            series: [
                {
                    data: number,
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: 'rgba(255,205,167,0.2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,205,167,1)'
                                }
                            ])
                        }
                    }
                }
            ]
        });
        nextTick(() => {
            myChart_two.resize();
        });
        window.onresize = function () {
            myChart_two.resize();
        };
    }
};
//员工分享top10
watch(
    () => props.staffData,
    val => {
        getEcharts(val);
    }
);
//客户分享top10
watch(
    () => props.customerData,
    val => {
        getEcharts2(val);
    }
);
</script>

<style lang="scss" scoped>
.share_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    margin-bottom: 16px;

    .share_main {
        background-color: #fff;
        border: 1px solid #eaeaea;

        .share_title {
            display: flex;
            align-items: center;
            padding: 0 24px;
            height: 56px;
            border-bottom: 1px solid #eaeaea;
        }

        .share_content {
            padding: 24px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;

            .min {
                width: 100%;
                height: 500px;
            }

            .no_data {
                height: 500px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .no_img {
                    margin-left: 24px;
                }

                .no_title {
                    color: #909399;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
